﻿<commonbase:LayoutAwarePage
    x:Class="Icinetic.FeedCategorySample.CoverPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Icinetic.FeedCategorySample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:converters="using:Icinetic.FeedCategorySample.Converters"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:commonbase="using:Icinetic.FeedCategorySample.Common.Base"
    xmlns:common="using:Icinetic.FeedCategorySample.Common"
    mc:Ignorable="d">

    <Page.Resources>
        <CollectionViewSource
                    x:Name="rssitemsViewSource"
                    Source="{Binding Items}"
                    />
    </Page.Resources>

    <Page.TopAppBar>
        <AppBar x:Name="appBarZoomIn" Style="{StaticResource TopAppBarStyle}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="MenuButton" Click="MenuButton_Click" Style="{StaticResource MenuAppBarButtonStyle}"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <Grid>
        <Image x:Name="backgroundImageSnapped" Source="/Assets/Fondo-snap.png" VerticalAlignment="Top" HorizontalAlignment="Stretch" Stretch="UniformToFill" Visibility="Collapsed" />

        <GridView x:Name="coverGridView" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Black" SelectionMode="None" Style="{StaticResource CoverFlipViewContainerStyle}" ItemsPanel="{StaticResource CoverFlipViewContainerItemsPanelTemplate}">
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="VerticalAlignment" Value="Stretch"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                </Style>
            </GridView.ItemContainerStyle>
            <FlipView x:Name="flipView" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Source={StaticResource rssitemsViewSource}}">
                <FlipView.ItemContainerStyle>
                    <Style TargetType="FlipViewItem">
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                    </Style>
                </FlipView.ItemContainerStyle>
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid Tapped="Grid_Tapped">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="0.2*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <Image HorizontalAlignment="Stretch" Source="{Binding Converter={StaticResource DefaultImageConverterPortada}}" Grid.RowSpan="2" Stretch="UniformToFill"/>
                            <Grid HorizontalAlignment="Stretch" Background="Black" Opacity="0.7" Grid.Row="1">
                                <TextBlock HorizontalAlignment="Stretch" Text="{Binding TitleAll}" Style="{StaticResource CoverTitleStyle}"/>
                                <TextBlock HorizontalAlignment="Right" VerticalAlignment="Bottom" Text="{Binding Category}" Style="{StaticResource CoverCategoryStyle}"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
        </GridView>

        <Grid x:Name="itemListScrollViewer"
            AutomationProperties.AutomationId="ListScrollViewer"
            VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="55"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            </Grid>
            <ListView x:Name="snappedControl" 
                    Visibility="Collapsed" 
                    AutomationProperties.AutomationId="ItemListView"
                    AutomationProperties.Name="Grouped Items"
                    Margin="0,-10,0,0"
                    Padding="10,0,0,60"
                    ItemsSource="{Binding Source={StaticResource rssitemsViewSource}}"
                    ItemTemplate="{StaticResource RssSnapedTemplate}"
                    SelectionMode="None"
                    IsSwipeEnabled="false"
                    IsItemClickEnabled="True"
                    ItemClick="snappedControl_ItemClick"
                    Grid.Row="1">
            </ListView>
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait"/>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backgroundImageSnapped" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedControl" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="coverGridView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</commonbase:LayoutAwarePage>